import React, { useEffect, useState } from 'react';
import { Input, message, Spin, Drawer } from 'antd';
// @ts-ignore
import InfiniteScroll from 'react-infinite-scroller';
import { TRDefault } from '@/components/index.js';
import { HttpCode } from '#/utils/contacts.js';
import planIcon from '@/assets/img/plan_icon.png';
import { FileItem } from '../../components';
import type { IQueryFQAParamsType } from '../../type';
import { postQueryFQA } from '../../service';
import styles from './index.less';

interface IProps {
  /**
   * 是否显示抽屉
   */
  visible?: boolean;
  /**
   * 关闭函数
   */
  onClose?: () => void;
}

const NomalQuestion = (props: IProps) => {
  const { visible = false, onClose } = props;
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [hasMore, setHasMore] = useState<boolean>(true);
  const [keywords, setKeywords] = useState<string>('');
  const [total, setTotal] = useState<number>(0);
  const [data, setData] = useState<any[]>([]);

  // 初始化
  const getQueryFQAData = async (params: IQueryFQAParamsType) => {
    setLoading(true);
    setError(false);
    const res = await postQueryFQA(params);
    if (res && res.statusCode === HttpCode.SUCCESS) {
      setData(res?.data?.records || []);
      setTotal(res?.data?.total ?? 0);
      setHasMore(res?.data?.total > 50 ? true : false);
    } else {
      setData([]);
      message.error(res?.message || '系统异常');
      setError(true);
    }
    setLoading(false);
  };

  const onSearch = (e: any) => {
    const _params = {
      current: 1,
      keywords: e,
      size: 50,
    };
    setKeywords(e);
    getQueryFQAData(_params);
  };

  const loadMore = async (page: number) => {
    if (!hasMore) return;
    setIsLoading(true);
    setHasMore(total > 50 * (page + 1) ? true : false);
    const _params = {
      current: page + 1,
      keywords,
      size: 50,
    };
    const res = await postQueryFQA(_params);
    if (res && res.statusCode === HttpCode.SUCCESS) {
      setTotal(res?.data?.total ?? 0);
      setData([...data, ...(res?.data?.records || [])]);
    } else {
      setData([...data]);
      message.info(res?.message || '系统异常');
    }
    setIsLoading(false);
  };

  // 取消
  const _onCancel = () => {
    onClose && onClose();
  };

  useEffect(() => {
    const _params = {
      current: 1,
      keywords: '',
      size: 50,
    };
    getQueryFQAData(_params);
  }, [visible]);

  return (
    <Drawer
      width={780}
      className={styles.operateLogModal}
      visible={visible}
      onClose={_onCancel}
      title={
        <div className={styles.titleDiv}>
          <img src={planIcon} className={styles.titleLogo} />
          <span className={styles.title}>常见问题</span>
        </div>
      }
      footer={null}
    >
      <div className={styles.container}>
        <div className={styles.header}>
          <div className={styles.search}>
            <Input.Search
              placeholder="搜索"
              onSearch={onSearch}
              style={{ width: 389 }}
              allowClear
            />
          </div>
        </div>
        <div className={styles.center}>
          {loading ? (
            <Spin />
          ) : error ? (
            <TRDefault type={'error'} message={'系统异常'} />
          ) : data?.length ? (
            <Spin spinning={isLoading} className={styles.spinloading}>
              <div className={styles.list}>
                <InfiniteScroll
                  initialLoad={false}
                  pageStart={0}
                  loadMore={loadMore}
                  hasMore={!loading && hasMore}
                  useWindow={false}
                  className={styles.infiniteScroll}
                >
                  {data?.map((item: any, index: number) => {
                    return (
                      <div className={styles.item}>
                        <FileItem data={item} order={index + 1} />
                      </div>
                    );
                  })}
                </InfiniteScroll>
              </div>
            </Spin>
          ) : (
            <TRDefault type={'emptysm'} message={'暂无数据'} />
          )}
        </div>
      </div>
    </Drawer>
  );
};

export default NomalQuestion;
